import { SVG } from "@libs/svg.js-3.2.0/build/svg.esm.js";

// 需要加载的图片资源
const imageResources = [
    {
        father: "#mtTrolley",
        replaced: "#mtTrolley_replaced",
        url: "/svg_trolley.png",
        svgdotjs_image: undefined,
    },
    {
        father: "#mtContainer",
        replaced: "#mtContainer_replaced",
        url: "/svg_container.png",
        svgdotjs_image: undefined,
    },
    {
        father: "#ptTrolley",
        replaced: "#ptTrolley_replaced",
        url: "/svg_trolley.png",
        svgdotjs_image: undefined,
    },
    {
        father: "#ptContainer",
        replaced: "#ptContainer_replaced",
        url: "/svg_container.png",
        svgdotjs_image: undefined,
    }
];

export const initializeCraneSVGPack = async (domElement: HTMLElement, svgRawContent: string) => {

    return new Promise((resolve, reject) => {

        const draw = SVG().addTo(domElement);
        draw.svg(svgRawContent);

        let loadedImages = 0;
        for (let i = 0; i < imageResources.length; i++) {
            const imageResourcesObject = imageResources[i];
            imageResourcesObject.svgdotjs_image = draw.image(imageResourcesObject.url).on("load", () => {
                const fatherS = draw.find(imageResourcesObject.father)[0];
                const replacedS = draw.find(imageResourcesObject.replaced)[0];
                console.log(replacedS, replacedS.x(), replacedS.y());
                imageResourcesObject.svgdotjs_image.addTo(fatherS);
                imageResourcesObject.svgdotjs_image.move(replacedS.x(), replacedS.y());
                replacedS.remove();

                loadedImages += 1;
                if (loadedImages === imageResources.length) {
                    onImagesLoaded();
                }
            });
        }

        const onImagesLoaded = () => {

            // 岸桥轨道车
            const mt = draw.find("#mtElement")[0];
            const pt = draw.find("#ptElement")[0];

            // mt
            const mtRopes = draw.find("#mtRopes")[0];
            const mtTrolley = draw.find("#mtTrolley")[0];
            const mtContainer = draw.find("#mtContainer")[0];

            // pt
            const ptRopes = draw.find("#ptRopes")[0];
            const ptTrolley = draw.find("#ptTrolley")[0];
            const ptContainer = draw.find("#ptContainer")[0];

            const wsContainer = draw.find("#wsContainer")[0];
            const lsContainer = draw.find("#lsContainer")[0];

            const pp = 1054.3 / 124; // 比例尺(svg单位/m)

            /** 主小车集装箱横坐标设置 */
            const setMtPositionX = (dtoX: number) => {
                const axisX = dtoX * pp;
                mt.x(axisX);
            }

            /** 门架小车集装箱横坐标设置 */
            const setPtPositionX = (dtoX: number) => {
                const axisX = dtoX * pp;
                pt.x(axisX);
            }

            // const rail1ToGround = (624.6 - 224.2) * 81 / 624.6; // 主小车轨道到地面的高度
            // const rail2ToGround = (624.6 - 481.6) * 81 / 624.6; // 门架小车轨道到地面的高度
            const groundYBase = 616.5; // 地面Y坐标
            const trolleyContainerGapY = 28;
            const rail1ToGroundY = 224.2;
            const rail2ToGroundY = 481.6;

            /** 主小车集装箱纵坐标设置 */
            const setMtPositionY = (dtgY: number) => {
                const axisY = groundYBase - dtgY * pp;
                mtTrolley.y(axisY);
                mtContainer.y(axisY + trolleyContainerGapY);

                const ropes = mtRopes.children();
                for (let i = 0; i < ropes.length; i++) {
                    const rope = ropes[i];
                    const height = axisY - rail1ToGroundY + 5;
                    rope.height(height > 0 ? height : 0);
                }
            }

            /** 门架小车集装箱纵坐标设置 */
            const setPtPositionY = (dtgY: number) => {
                const axisY = groundYBase - dtgY * pp;
                ptTrolley.y(axisY);
                ptContainer.y(axisY + trolleyContainerGapY);

                const ropes = ptRopes.children();
                for (let i = 0; i < ropes.length; i++) {
                    const rope = ropes[i];
                    const height = axisY - rail2ToGroundY + 5;
                    rope.height(height > 0 ? height : 0);
                }
            }

            /** 主小车集装箱显示设置 */
            const setMtContainerVisiablity = (visiable: boolean) => {
                if (visiable) mtContainer.show();
                else mtContainer.hide();
            }
            /** 门架小车集装箱显示设置 */
            const setPtContainerVisiablity = (visiable: boolean) => {
                if (visiable) ptContainer.show();
                else ptContainer.hide();
            }
            /** 集装箱平台海侧集装箱显示设置 */
            const setWsContainerVisiablity = (visiable: boolean) => {
                if (visiable) wsContainer.show();
                else wsContainer.hide();
            }
            /** 集装箱平台陆侧集装箱显示设置 */
            const setLsContainerVisiablity = (visiable: boolean) => {
                if (visiable) lsContainer.show();
                else lsContainer.hide();
            }

            /** 复位 */
            const resetStatus = () => {
                setMtContainerVisiablity(false);
                setPtContainerVisiablity(false);
                setWsContainerVisiablity(false);
                setLsContainerVisiablity(false);
                setMtPositionX(10);
                setMtPositionY(15);
                setPtPositionX(20);
                setPtPositionY(5);
            }

            resolve({
                draw,
                setMtPositionX, setPtPositionX, setMtPositionY, setPtPositionY,
                setMtContainerVisiablity, setPtContainerVisiablity,
                setWsContainerVisiablity, setLsContainerVisiablity,
                resetStatus
            });
        }
    })

}